<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>站点收益</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				box-sizing: border-box;
				padding: 2vh;
			}
			
			.top {
				width: 100%;
				height: 50%;
			}
			
			.bottom {
				width: 100%;
				height: 50%;
			}
			
			#revenueEchart {
				width: 100%;
				height: 100%;
			}
			#revenuePie{
				width:50%;
				height:100%;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="top">
				<div id="revenueEchart">

				</div>
			</div>
			<div class="bottom">
				<div id="revenuePie">

				</div>
			</div>
		</div>
	</body>

</html>
<script src="../lib/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
	var MainLogic = {
		init: function() {
			self = this;
			this.json1 = {
				value: '',
				name: '地铁1号线',
			}
			this.json2 = {
				value: '',
				name: '地铁2号线',
			}
			this.json3 = {
				value: '',
				name: '地铁3号线',
			}
			this.json4 = {
				value: '',
				name: '地铁4号线',
			}
			this.colorData = [{
				Name: '一号线',
				color: '#B35A1F'
			}, {
				Name: '二号线',
				color: '#793E8C'
			}, {
				Name: '三号线',
				color: '#FCD600'
			}, {
				Name: '四号线',
				color: '#CC0000'
			}];
			self.bindEvent();
			self.initPage();
		},
		//初始化列表
		initPage: function() {
			self.events.loadRevenueEchart();
			self.events.loadAllrevenuePie();
		},
		//绑定事件
		bindEvent: function() {

		},
		//事件
		events: {
			//载入收益柱状图
			loadRevenueEchart: function() {
				$.get("http://159.75.66.230:8080/data/outPrice", function(data) {
					var stationData = []
					var priceData = []
					$.each(data, function(index, value) {
						stationData.push(value.stationOut)
						priceData.push(value.price / 10000)
					})
					var revenueEchart = echarts.init(document.getElementById('revenueEchart'));
					var option = {
						title: {
							text: '2019年12月-2020年7月地铁出站口收益图'
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								crossStyle: {
									color: '#fff'
								}
							}
						},
						grid: {
							left: 45
						},
						xAxis: [{
							type: 'category',
							name: '站点',
							data: stationData,
							axisLabel: {
								textStyle: {
									color: '#fff'
								},
								lineStyle: {
									color: '#979797'

								},

								interval: 0
							},
							nameTextStyle: {
								color: '#000'
							}
						}],
						yAxis: [{
							type: 'value',
							name: '单位/万元',

							min: 0,
							max: 1500,
							interval: 100,

							axisLabel: {
								textStyle: {
									color: '#000'
								},
								lineStyle: {
									color: '#979797'

								}

							},
							nameTextStyle: {
								color: '#000'
							}
						}],
						series: [{
							name: '收益',
							type: 'bar',
							itemStyle: {
								normal: {
									color: "#3C92F0"

								}
							},

							barWidth: 2,
							data: priceData,
						}]
					};

					revenueEchart.setOption(option);
				}, 'json');

			},
			//载入收益饼状图
			loadAllrevenuePie: function() {
				var colors = [];
				var gdata = [];
				$.each(self.colorData, function(index, value) {
					colors.push(value.color);
				});
				$.ajax({
					type: "Get",
					url: "http://159.75.66.230:8080/data/outPrice",
					async: false,
					dataType: "json",
					success: function(data) {
						var sum1 = 0;
						var sum2 = 0;
						var sum3 = 0;
						var sum4 = 0;
						$.each(data, function(index, value) {
							if(value.route == 1) {
								sum1 = sum1 + value.price
							} else if(value.route == 2) {
								sum2 = sum2 + value.price
							} else if(value.route == 3) {
								sum3 = sum3 + value.price
							} else if(value.route == 4) {
								sum4 = sum4 + value.price
							}
						});
						self.json1.value = sum1 / 10000
						self.json2.value = sum2 / 10000
						self.json3.value = sum3 / 10000
						self.json4.value = sum4 / 10000

					}
				});
				gdata.push(self.json1)
				gdata.push(self.json2)
				gdata.push(self.json3)
				gdata.push(self.json4)
				var myChart = echarts.init($("#revenuePie")[0]);
				myChart.setOption({
					title: {
						text: '2019年12月-2020年7月地铁线路出站口收入饼状图',

						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'right',
						icon: "circle",
						y: 'center',
						itemGap: 20,
						formatter: function(name) {
							var clientcounts = 0;
							$.each(gdata, function(index, value) {
								if(name == value.name) {
									clientcounts = value.value;
								}
							});
							return name + "  " + clientcounts + "万元";
						}
					},
					toolbox: {
						show: false,
						feature: {
							saveAsImage: {
								show: true
							}
						}
					},
					color: colors,
					series: [{
						name: '设备类型',
						type: 'pie',
						radius: '50%',
						center: ['25%', '50%'],
						data: gdata,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)',

							}
						},
						itemStyle: {
							normal: {
								label: {
									show: false //隐藏标示文字
								},
								labelLine: {
									show: false //隐藏标示线
								}
							}
						}
					}]
				});
			}
		}
	};

	$(function() {
		MainLogic.init();
	});
</script>